<?xml version="1.0" encoding="UTF-8"?>
<doc>

<title>画面切换效果的使用</title>

<para>
<ptitle>写在前面的话</ptitle>
　渐入和渐出，百叶窗之类，需要时间的画面转换的效果称呼为<kw>过渡</kw>(切换 transition)。<r/>
　吉里吉里/KAG中，能使用的切换效果有渐入渐出（crossfade）、规则画像切换（universal）、画面卷动过渡（scroll）等３种。<r/>
　此外，使用扩张的切换效果插件 ( extrans.dll ) ，可以增加数种切换效果 ( 参考吉里吉里 SDK 帮助的「关于过渡」 )。<r/>
</para>

<para>
<ptitle>crossing fade 过渡</ptitle>
　crossing fade 过渡，是单纯的画面切换效果。<r/>
　既然是 Transition (切换)，自然是需要有切换前的画面和切换后的画面存在了。KAG 的情况下，切换前的原图像位于表页，而切换后的图像首先是读入里页中的。也就是说，里页的图像将通过切换，转移到表页来。<r/>
　随着过渡效果的开始，表页的图像渐渐被里页的图像替换掉，最后，表页的图像变得与里页相同。<r/>
<r/>
<note>
　KAG 中没有<kw>fade out</kw>、<kw>fade in</kw>的概念。假如想要做出淡出的效果，在里页中读入一张纯黑色图片，然后进行画面的crossing fade切换即可。
</note>
</para>

<para>
<ptitle>universal 过渡</ptitle>
　所谓的universal 过渡，即是“通用的”过渡方式，使用这种方式，可以自由的制作「画面切换效果」。<r/>
<r/>
　同时，使用universal 过渡时，还需要使用到一种叫<kw>规则画像</kw>的灰度（gray scale）图片。当规则画像的大小小于过渡层的大小时，会自动地把规则画像平铺使用。以规则画像作为“切换准则”，进行过渡。<r/>
　此外，使用universal 过渡类型时，必要的属性有两个：<kw>time</kw> (过渡所用时间)，以及<kw>vague</kw> (<kw>领域值</kw>) 。<r/>
<r/>
　举个例子。<r/>
<r/>
　请看以下的图像。<r/>
<descimg>
<dititle>切换前的画面、切换后的画面、规则画像</dititle>
<img src="univtrans_A.png"/><img src="univtrans_B.png"/><img src="univtrans_R.png"/>
</descimg>
<r/>
　像这样，标着 A 的图像切换成了标着 B 的图像。此外，这里使用的规则画像，只是单纯的从上到下黒白渐变的图片。<r/>
<r/>
　那么，首先把 <kw>vague</kw> (领域值) 设为 1 ，那么切换效果将会如下图所示。从左到右逐渐变化。（这里显示的是一格格的情况，实际上是同一画面在切换进行的时候，各个时期的状态。）<r/>
<descimg>
<dititle>vague=1 的时候</dititle>
<img src="univtrans_V1.png"/>
</descimg>
<r/>
　也就是说，从规则画像中的黑色部分开始，向白色部分扩大，渐渐地变成图像 B 的样子。<r/>
<r/>
　接着试试 vague=64 的情况。<r/>
<descimg>
<dititle>vague=64 的时候</dititle>
<img src="univtrans_V64.png"/>
</descimg>
　这一次，图 A 和图 B 的边界变的模糊了？实际上就是这样，在 vague 值越大的情况下，切换中的边缘模糊部分将会越大。vague 的值，请指定为 1 以上。<r/>
<r/>
　规则画像可以不用是如例子所示的那样简单的图形，使用各种各样的图案，就能根据画像自由地达成丰富的切换效果了。<r/>
<r/>
　吉里吉里官方下载页面 <at target="_top" href="http://kikyou.info/tvp/">http://kikyou.info/tvp/</at> 上的「<kw>トランジションライブラリ</kw>」部分，、提供了 20 多种的规则画像下载。<!-- 此外，包内还附有展示对应规则画像实际画面切换效果的范例，希望能加深对规则画像使用的理解。--><r/>
</para>

<para>
<ptitle>画面卷动过渡</ptitle>
　画面卷动过渡，是与universal过渡不同，切换后 ( 里画面 ) 的图象将切换前 ( 表画面 ) 的图象以卷动的方式替换的效果。<r/>
　切换后 ( 里画面 ) 的图象进入画面的方式，可以选择从左、上、右、下 4 个方向进入。<r/>
　此外，画面卷动过渡又分为三种方式。<r/>
<r/>
　首先、当把<kw>stay</kw> 属性设置为 "stayfore" 的情况下，卷动效果将如图所示(从下开始卷动的场合)。<r/>
<descimg>
<dititle>stay=stayfore 的时候</dititle>
<img src="univtrans_Sstay.png"/>
</descimg>
　像这样、stay 属性为 "stayfore" 的情况下，表页的图像将停留不动，造成像是里页图像从外移入的感觉。<r/>
<r/>
　此外、stay 属性为 "stayback" 的情况下，将如下图所示。<r/>
<descimg>
<dititle>stay=stayback 的时候</dititle>
<img src="univtrans_Sstaysrc.png"/>
</descimg>
　这种情况下，表页图象向画面外移动，造成像是露出里页图像的感觉。<r/>
<r/>
　stay 属性设定为 "nostay" 的情况，则如下图所示。<r/>
<descimg>
<dititle>stay=nostay 的时候</dititle>
<img src="univtrans_Snostay.png"/>
</descimg>
　像这样、有一种切换后的图像将原图像推出画面的感觉。假如图象 A 和图象 B 的画面可以衔接起来，就可以做出大场景卷动的效果了。但是，这不是为前景切换所准备的效果（在任何一层使用，都是全画面切换）<tt>(^^;;</tt><r/>
</para>

<para>
<ptitle>表页和里页</ptitle>
　在进行过渡时，非常重要的是<kw>表页</kw>和<kw>里页</kw>这两个概念。<r/>
　<link href="DispBase"/> 中也介绍过了，KAG 中，有看得见的表页和看不见的里页，除了可见和不可见的区别以外，其构成是相同的。<r/>
　KAG 的过渡，一般是将现在显示中的表页内容，渐渐替换为里页的内容。过渡完成的时候，表页的内容将和里页完全相同。<r/>
　因此，在过渡前，就必须对里页进行操作了。<r/>
<r/>
　如下例。这是只更换背景的场合。<r/>
　首先，在进行过渡前，层的状态是如下图所表示的 ( 左边是表页内容、右边是里页内容 )<r/>
<r/>
<descimg>
<dititle>过渡前</dititle>
<img src="trans0f.jpg"/>
<img src="trans0b.jpg"/>
</descimg>
　这个时候，显示的内容其实是由背景层的表页，前景层的表页，和消息层的表页组成。里页具体是什么样的都没有关系。<r/>
　在这里，我们使用 [backlay] 这一指令，让里页的内容变得和表页一样。<r/>
<descimg>
<dititle>backlay 指令执行后</dititle>
<img src="trans0f.jpg"/>
<img src="trans0f.jpg"/>
</descimg>
　过渡即是将里页的内容移动到表页，在过渡之前，里页没有内容的话可不行。<r/>
　这里要进行的是背景层的过渡，因此，在里页中读入背景图像。<r/>
<descimg>
<dititle>在里页中载入背景图像后</dititle>
<img src="trans0f.jpg"/>
<img src="trans2b.jpg"/>
</descimg>
　在这里，终于能用 trans 指令进行切换了……虽然很无聊，不过再说一句，过渡就是用里页的内容去替换掉表页的内容。<r/>
　在过渡中的状况，则是如下图所示 ( 过渡的例子 )。<r/>
<descimg>
<dititle>过渡中</dititle>
<img src="trans3f.jpg"/>
<img src="trans2b.jpg"/>
</descimg>
　使用trans后，要使用 [wt] 指令来等待过渡效果结束。<r/>
　过渡结束之后，就如下图所示，表页的内容变得和里页一样了。<r/>
<descimg>
<dititle>过渡后</dititle>
<img src="trans2b.jpg"/>
<img src="trans2b.jpg"/>
</descimg>
</para>

<para>
<ptitle>试试切换背景吧</ptitle>
　进行过渡，使用到的是 <kw>trans</kw> 指令。<r/>
　基本的过渡就是、用 [<kw>backlay</kw>] 指令把全部表页的内容复制到里页，然后对想要进行切换的层，使用 image 指令把图像读入对应层的里页，然后使用 trans 指令进行过渡。于是，里页部分的变化，因为过渡而转移到了表页，使表页也改变了。<r/>
<r/>
　首先，试着使用 cross fade 过渡切换背景吧。<r/>
<r/>
<bq>
[image storage="bg0" page=fore layer=base]<r/>
[wait time=200]<r/>
*start|开始<r/>
[cm]<r/>
你好。试试背景切换吧。[l][r]<r/>
<b>[backlay]</b><r/>
[image storage="bg1" layer=base <b>page=back</b>]<r/>
<b>[trans method=crossfade time=1500]</b><r/>
<b>[wt]</b><r/>
切换过来了吗？<r/>
</bq>
　首先、使用[backlay] 指令将现在表页的内容复制到里页。<r/>
　接着，在里页中的背景层部分，读入以下的图像。<r/>
　这个时候，里页和表页的不同之处仅在于背景图像。<r/>
　接着用 trans 指令进行过渡。像这样，trans 的属性请设定成 <tt>method=crossfade</tt> 则是 cross fade 过渡。在这个例子里，过渡时间是 1.5 秒。时间是使用毫秒为单位的，因此设为 <tt>time=1500</tt> 。<r/>
<note>
　虽然指定单位是毫秒,但是时间并没有精确到毫秒。
</note>
<r/>
　之后，使用<kw>wt</kw> 指令等待过渡结束。<b>KAG 中，假如没有 wt 指令的话，将会不等待过渡结束就继续执行下一指令</b>，所以请不要忘记加上 wt 指令哦。<r/>
<note>
　不只是过渡，KAG 中「需要花时间进行处理」的指令，大部分是不会自行等待处理结束的，而都另外设定了等待处理结束的指令。这样的话，就可以进行类似一边切换画面，一边淡出 BGM 之类的处理了。<r/>
　此外，<b>对应的「等待」指令请务必要加上</b>。即使是有其他等待的场合 ( 过渡后还使用了 wait 指令之类 ) ，也必须要写上对应的「等待处理结束」指令。<r/>
</note>
<r/>
<r/>
　同时，如果改用universal 过渡的话，则如以下所示。<r/>
<bq>
[image storage="bg0" page=fore layer=base]<r/>
[wait time=200]<r/>
*start|开始<r/>
[cm]<r/>
你好。试试背景切换吧。[l][r]<r/>
<b>[backlay]</b><r/>
[image storage="bg1" layer=base <b>page=back</b>]<r/>
<b>[trans method=universal rule="rule1" vague=1 time=1500]</b><r/>
<b>[wt]</b><r/>
切换过来了吗？<r/>
</bq>
<r/>
　本例中也是使用 trans 指令进行过渡的。像这样、将trans 的属性设定为 <tt>method=universal</tt> 的话，就成为universal过渡 ( 假如省略 method，直接写成universal也可以 )。本例中，规则画像使用的是 "rule1" 、时间是 1.5 秒、领域值为 1 。<r/>
<r/>
　此外，进行滚动过渡，从右移入，原画面不移动的情况下，则是以下的代码・・・<r/>
<r/>
<bq>
[image storage="bg0" page=fore layer=base]<r/>
[wait time=200]<r/>
*start|开始<r/>
[cm]<r/>
你好。试试背景切换吧。[l][r]<r/>
[backlay]<r/>
[image storage="bg1" layer=base <b>page=back</b>]<r/>
[trans <b>method=scroll from=right stay=nostay children=false</b> time=1500]<r/>
[wt]<r/>
切换过来了吗？<r/>
</bq>
　就是这样。这里设定了 <tt>children=false</tt> 、假如不指定的话，切换层的「<kw>子层</kw>」也会一起移动。KAG 中、背景层是父层，前景层和消息层这样的就是子层。<r/>
　希望子层也一起移动的情况下，写明为 <tt>children=true</tt> 也可以。<r/>
</para>

<para>
<ptitle>前景层的切换</ptitle>
　前景层的切换也需要使用 trans 指令。<r/>
<r/>
<bq>
[image storage="bg0" page=fore layer=base]<r/>
[wait time=200]<r/>
*start|开始<r/>
[cm]<r/>
你好。开始演示前景层的切换。[l][r]<r/>
[backlay]<r/>
[image layer=0 page=back storage="fg0" visible=true]<r/>
; 这个时候、表页的前景层 0 是(因为默认设定)不可见的、<r/>
; 这个时候、里页的前景层 0 装载了可见的图像、<r/>
; 其他层的里页因为使用了 backlay 指令的缘故、都和表页内容是一样的<r/>
[trans method=crossfade time=1500][wt]<r/>
接着，切换前景层。[l][r]<r/>
[backlay]<r/>
[image layer=0 page=back storage="fg1" visible=true]<r/>
; 这个时候、里页的前景层 0 是 fg1 这张图片、<r/>
; 其他层的里页因为使用了 backlay 指令的缘故、都和表页内容是一样的<r/>
[trans method=crossfade time=1500][wt]<r/>
接着，让前景层消失。[l][r]<r/>
[backlay]<r/>
[layopt layer=0 page=back visible=false]<r/>
; 这个时候、里页的前景层 0 不可见、<r/>
; 其他层的里页因为使用了 backlay 指令的缘故、都和表页内容是一样的<r/>
[trans method=crossfade time=1500][wt]<r/>
</bq>
　上面的例子，先是显示了一张前景图，然后切换为其他前景图，最后让前景消失。<r/>
　首先是显示部分：一开始、使用backlay 指令、将表页的内容全部复制到里页。之后、对想要改变的部分做操作，这里是在前景层上显示前景图片、因此是在里页的前景层内读入图像。<r/>
　再之后、使用trans 指令。<r/>
<r/>
　接着是前景替换部分：这也是、使用backlay 将表页内容复制到里页、操作想要改变的部分、使用trans 指令进行过渡。<r/>
<r/>
　最后是前景消失部分：backlay 将表页内容复制到里页后、将对应的前景层设为不可见。不可见的意思、就是说不会显示出来了(废话) 、再进行过渡，那么图像就消失了。<r/>
<r/>
　还有，在这里，对里页的对应层指定了 visible=true ，这样会不会把里页也显示出来呢，您或许会担心这一点。但是，里页 ( 背景层及其子层 ) 是无论任何时候都不会显示的，即使使用了 visible=true 也不必担心。<r/>
<r/>
<note>
　和上面的例子一样、trans 指令的 layer 属性省略的情况下，则认为是指定了 base ( 背景层 ) 、children 属性省略的情况下则认为是设成 true  ( 子层也进行同样过渡 ) 。<r/>
　前景层的过渡显示，切换和消除的时候，以及其他的各种过渡的情况下，对背景层来说，一般是子层也一起进行了过渡。对layer=0 之类的前景层或消息层进行单独过渡的情况下也是有的，但通常不使用。<r/>
</note>
</para>

<para>
<ptitle>消息层的切换效果</ptitle>
　消息层也可以用同样的方法进行切换。<r/>
　切换消息层的场合、可见・不可见同样也可以使用 layopt 指令进行指定。<r/>
<r/>
　比如说，在消息层不可见的情况下进行文字描绘，文字描绘完毕之后，通过过渡显示在画面上，就包含在以下的例子中。另外，本例也包含了显示后，通过过渡使文字层消失的代码。<r/>
<r/>
<bq>
[layopt layer=message page=fore visible=false]<r/>
; ↑首先让消息层的表页不可见<r/>
[layopt layer=message page=back visible=true]<r/>
; ↑里页的message层是可见状态<r/>
[wait time=200]<r/>
*start|开始<r/>
[cm]<r/>
[current page=back]<r/>
; ↑当前要操作的对象是层的里页<r/>
[delay speed=nowait]<r/>
; ↑文字蹦字速度为“瞬间显示”<r/>
像这样，使用过渡以后，可以显示消息层。[r]<r/>
[delay speed=user]<r/>
; ↑文字蹦字速度恢复为原来设定速度<r/>
[trans method=universal rule="trans1" vague=1 time=1500][wt]<r/>
; ↑使用规则图像进行过渡<r/>
[current page=fore]<r/>
; ↑现在想要操作的对象设定为表页<r/>
[l]<r/>
; ↑等待点击<r/>
[layopt layer=message page=back visible=false]<r/>
; ↑里页的消息层设为不可见状态<r/>
[trans method=universal rule="trans1" vague=1 time=1500][wt]<r/>
; ↑过渡<r/>
</bq>
</para>
</doc>